<!-- Dom页面 -->
<template>
  <div id="UserIndex">
    <!-- 查询条件行 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input placeholder="保鲜仓名称" v-model="queryWHForm.whName" clearable>
        </el-input>
      </el-col>
      <el-col :span="5">
        <el-date-picker
          v-model="queryWHForm.date"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="8">
        <el-button  type="primary" plain icon="el-icon-search" @click="toQueryWH()">查询</el-button>
        <el-button  type="warning" plain icon="el-icon-refresh" @click="cleanQeury()">清空</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px; margin-left: 20px;" :gutter="80">
      <el-col :span="12">
        <div class="targetDiv">
          <e-charts class="chart" :option="option" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="targetDiv">
          <e-charts class="chart" :option="option2" />
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px; margin-left: 20px" :gutter="80">
      <el-col :span="22">
        <div class="targetDiv2">
          <e-charts class="chart" :option="option3" />
        </div>
      </el-col>
    </el-row>
    <!-- <div class="showTargetDiv">
      <div class="targetDiv">1</div>
      <div class="targetDiv">1</div>
      <div class="targetDiv">1</div>
      <div class="targetDiv">1</div>
    </div> -->
  </div>
</template>

<!-- :column="3" -->
<!-- 组件js -->
<script>
export default {
  name: "GoodsTable",
  data() {
    return {
      //查询条件表单
      queryWHForm:{
        whName:null,
        date:null
      },
      //温度折线图数据
      temperatureData:this.getRandomData(),
      temperatureData2:this.getRandomData(),
      //分类统计数据
      typePercentageData:[
        {value:22.34,name:"土豆"},
        {value:12.4,name:"西红柿"},
        {value:9.34,name:"白菜"},
        {value:9.34,name:"豌豆"},
      ],
      //数量聚合数据
      numData:[
        {name:"土豆",num:23.3},
        {name:"西红柿",num:12.9},
        {name:"白菜",num:43.3},
        {name:"豌豆",num:63.62}
      ]
    };
  },
  computed:{
    //折线图
    option3(){
      return {
        title: {
          text: '出入库统计表',//大标题
          subtext: '单位：%'//副标题
        },
        legend: {
          data: ['出库记录', '入库记录']
        },
        xAxis:{
          type: 'category',
          data: this.temperatureData.map(d => d.time)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name:"出库记录",
            data: this.temperatureData.map(d => d.value),
            type: 'line'
          },
          {
            name:"入库记录",
            data: this.temperatureData2.map(d => d.value),
            type: 'line'
          }
        ]
      }
    },
    //饼状图
    option(){
      return{
          title: {
            text: '分类统计',
            subtext: '占比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: this.typePercentageData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      },
      //柱状图
      option2(){
        return {
          title: {
            text: '物资数量统计',
          },
          xAxis: {
            type: 'category',
            data: this.numData.map(d => d.name)
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.numData.map(d => d.num),
              type: 'bar'
            }
          ]
        }
      }
  },
  methods:{
    //点击查询按钮
    toQueryWH(){
      
    },
    //点击清空按钮
    cleanQeury(){
      this.queryWHForm = {
        whName:null,
        isUse:null
      }
    },
    //随机生成图表数据
    getRandomData(){
      return [
              {
                time: '2022-2-2',
                value: Math.random() * 100
              },
              {
                time: '2022-2-2',
                value: Math.random() * 100
              },
              {
                time: '2022-2-2',
                value: Math.random() * 100
              },
              {
                time: '2022-2-2',
                value: Math.random() * 100
              }
            ]
    }
  },
  mounted(){
    setInterval(() => {
      this.data = this.getRandomData()
    },3000)
  }
};
</script>

<!-- CSS代码 -->
<style scoped>
.showTargetDiv{

}
.targetDiv{
  height: 260px;
  width: 500px;
}
.targetDiv2{
  
}
.chart{
  height: 280px;
}
</style>
